import NetFunc from "./NetFunc";
import { useRoute } from "vue-router";
import { reactive, watch, computed, ref } from "vue"
// import router from "../../router";
import { useStore } from "vuex";
export default {
    template: `
    <div class="main">
    <div class="d_title">
    <h1>{{game[0].title}}</h1>
    </div>
    <div class="ksyx">
        <div class="tw">
        <a :href="game[0].link" target="_blank">
            <img :src="game[0].thumbnail" class="back_i"/>
            <br/>
            <button>开始游戏</button>
        </a>
        </div>
        <div class="dr">
            游戏介绍：<br>
            {{game[0].description}}
        </div>
    </div>
    <div class="plq">
        <div>
        <textarea class="content" cols="10" placeholder="请输入留言" v-model="user.content"/>
        </div>
        <button @click="TapMsg">提交留言</button>
        <div v-for="item in content" class="ct">
            <div class="ava_d">
            <img :src="item.ava" class="ava_i"/>
            </div>
            <div class="pl">
            {{item.username}}
            <span class="date">{{item.date}}</span>
            <hr>
            {{item.content}}
            </div>
        </div>
    </div>
    </div>
    `,
    setup() {
        const game = reactive([])
        const content = reactive([])
        const user = reactive({
            content: '', username: '游客',
            ava: 'https://img1.baidu.com/it/u=2250275304,3941496093&fm=253&fmt=auto&app=138&f=GIF?w=200&h=200',
        })
        const route = useRoute()
        const store = useStore()
        const page = computed(() => store.state.page)
        const isLogin=computed(()=>store.state.isLogin)
        const NF = new NetFunc()
        const id = route.query.ID
        //详情页面
        async function ShowDetail() {
            const url = 'http://localhost:3300/r/gameDetail?id='+id
            const detail = await NF.GetDetail(url)
            game.push(detail.data.msg[0])
            console.log(game)

        }
        //判断是否登录
        function IsLogin(){
            if(store.state.isLogin==true){
                user.username=computed(()=>store.state.user)
                user.ava=computed(()=>store.state.ava)
            }
            console.log(user)
        }
        //评论界面
        async function ShowContent() {
            const url = 'http://localhost:3300/r/content?id='+id
            const ly = await NF.GetUrl(url)
            content.length=''
            for (let i of ly.data.msg) {
                i.date=new Date(parseInt(i.date)).toLocaleString()
                content.push(i)
            }
                console.log(content)
        }
        //留言
        async function TapMsg() {
            if(user.content.length<1){
                alert('留言内容不能为空！')
                return
            }
            const url = 'http://localhost:3300/r/addcontent'
            const opt = {
                username: user.username,
                content: user.content,
                ava: user.ava,
                date:(new Date()).valueOf() ,
                id: id,
            }
            console.log(opt)
            const d = await NF.PostUrl(url, opt)
            // console.log('访问结果',d)

            const msg = d.msg
            ShowContent()
            user.content= ''
        }
        IsLogin()
        ShowContent()
        ShowDetail()
        return { ShowDetail,IsLogin, TapMsg, ShowContent, page, user, game, content }
    }

}